.box-modal{
  @include mask;

  .modal-content{
    color: #000;
    font-size: 28rpx;
    font-weight: 400;
    width: 600rpx;
    padding: 16rpx 32rpx;
    text-align: center;
    background: #fff;
    box-sizing: border-box;
    .title{
      font-size: 34rpx;
      font-weight: 500;
      padding: 32rpx;
    }
    .btn{
      color: #fff;
      background: #000;
      line-height: 80rpx;
      margin: 32rpx 0;
    }
    .content-list{
      text-align: left;
      position: relative;
      .line-left{
        position: absolute;
        left: 0;
        top: 14rpx;
        width: 3rpx;
        height: 280rpx;
        background-color: #999;
      }
      .content-item{
        position: relative;
        // padding-bottom: 60rpx;
        min-height: 140rpx;
        padding-left: 20rpx;
        // border-left: 4rpx solid #999;
        &:nth-last-child(1){
          border-left: none;
        }
        &::after{
          content: '';
          position: absolute;
          width: 16rpx;
          height: 16rpx;
          left: -8rpx;
          border-radius: 50%;
          top: 14rpx;
          background-color: #999;
        }
        &::before{
          content: '';
          left: -16rpx;
          top: 6rpx;
          width: 26rpx;
          height: 26rpx;
          position: absolute;
          background-color: #fff;
          border: 2rpx solid #999;
          border-radius: 50%;
          display: inline-block;
          
        }
      }
    }
    .content{
      text{
        text-align: left;
        display: inline-block;
      }
    }
  }

  &.active{
    @include flex;
    @include center;
  }
}